<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>ER modeller</title>
    <style>
.sys_empty4ie {
    display: none;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}
* html .sys_empty4ie {
    zoom: 1;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}
body {
    font-family: 'Calibri', sans-serif;
    line-height: 20px;
    font-size: 14px;
    overflow: hidden;
}
html {
    background-color: #C0C0C0;
}
.t-w {
    padding: 0px 13px;
    position: absolute;
}
.t-tl,
.t-tr,
.t-bl,
.t-br {
    background-image: url(h.png);
    background-attachment: scroll;
    background-repeat: no-repeat;
    width: 13px;
    height: 13px;
    position: absolute;
}
.t-tl {
    background-position: 0px 0px;
    left: 0px;
    top: 0px;
}
.t-tr {
    background-position: 100% 0px;
    right: 0px;
    top: 0px;
}
.t-bl {
    background-position: 0px -13px;
    left: 0px;
    bottom: 0px;
}
.t-br {
    background-position: -13px -13px;
    right: 0px;
    bottom: 0px;
}


.t-1bg {
    background-image: url(h.png);
    background-attachment: scroll;
    background-repeat: repeat-x;
    background-position: 0px -26px;
}
.t-1bg-b {
    padding: 3px 0px;
    background-image: url(h.png);
    background-attachment: scroll;
    background-repeat: repeat-x;
    background-position: 0px 100%;
}
.t-1br {
    padding: 1px 0px;
    background-color: #202020;
}
.t-1 {
    background-color: #C7DEF3;
    padding: 9px 0px;
}
.t-2bg {
    margin: 0px -13px;
    background-image: url(v.png);
    background-attachment: scroll;
    background-repeat: repeat-y;
    background-position: 0px 0px;
}
.t-2bg-r {
    padding: 0px 3px;
    background-image: url(v.png);
    background-attachment: scroll;
    background-repeat: repeat-y;
    background-position: 100% 0px;
}
.t-2br {
    background-color: #202020;
    padding: 0px 1px;
}
.t-2 {
    padding: 0px 9px;
    background-color: #C7DEF3;
}
.t-3 {
    margin: 0px -9px;
    background-color: #FFFFFF;
}
.t-h,
.t-con .row {
    border-bottom: 1px solid #D5D5D5;
}
.t-h {
    overflow: hidden;
    padding: 0px 3px 0px 6px;
    background-color: #C7DEF3;
}
.t-con {
    overflow: hidden;
    padding: 4px 0px 0px 0px;
}
.t-con .row {
    padding: 0px 3px 0px 6px;
    white-space: nowrap;
    padding: 0px 3px 2px 20px;
    line-height: 17px;
}
.t-overlay {
    width: 168px;
    height: 231px;
    left: 200px;
    top: 100px;
    position: absolute;
    /*background-color: white;*/
}
* html .t-overlay {
    background-color: #C7DEF3;
    filter: alpha(opacity=0);
}
*+html .t-overlay {
    background-color: #C7DEF3;
    filter: alpha(opacity=0);
}

/*================================================*/

.r {
    background-color: #F3DEC7;
    position: absolute;
    background: url(rmto.png) scroll no-repeat 0px 0px;
}


</style>
</head>
<body style="margin: 0px; padding: 0px;">
<div id="container" style="margin: 100px; position: relative; width: 800px; height: 600px;">

<div id="table2" class="t-w" style="left: 200px; top: 100px;">
    <div class="t-tl"><span class="sys_empty4ie"></span></div>
    <div class="t-tr"><span class="sys_empty4ie"></span></div>
    <div class="t-bl"><span class="sys_empty4ie"></span></div>
    <div class="t-br"><span class="sys_empty4ie"></span></div>

    <div class="t-1bg">
    <div class="t-1bg-b">
    <div class="t-1br">
    <div class="t-1">
        <div class="t-2bg">
        <div class="t-2bg-r">
        <div class="t-2br">
        <div class="t-2">
            <div class="t-3">
                <div class="t" style="width: 160px; height: 205px;">
                <!--<span class="empty4ie"></span>-->
                    <div class="t-h">PGRAPH_NODE</div>
                    <div class="t-con">
                        <div class="row">pgraph_id</div>
                        <div class="row">node_index</div>
                        <div class="row">type</div>
                        <div class="row">out_true_index</div>
                        <div class="row">out_false_index</div>
                        <div class="row">out_decline_index</div>
                        <div class="row">condition_id</div>
                        <div class="row">processing_id</div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>
        </div>
    </div>
    </div>
    </div>
    </div>
</div>
<div id="table-overlay2" class="t-overlay" onclick="return false;" onmousedown="return false;" onmouseout="return false;" onmouseover="return false;" onmouseup="return false;"><span class="empty4ie"></span></div>
<!--
<div id="rel1" class="r r-h r-l r-m r-o" style="
left: 253px;
top: 328px;
width: 25px;
height: 29px;"><span class="empty4ie"></span></div>

--></div>

<script type="text/javascript">

///////////////////////////////////////////////////////////////////////////////////////////////
// Функция для добавления обработчиков событий http://webew.ru/articles/180.webew
function addHandler(object, event, handler, useCapture) {
    if (object.addEventListener) {
        object.addEventListener(event, handler, useCapture ? true : false);
    } else if (object.attachEvent) {
        object.attachEvent('on' + event, function(event){ handler.handleEvent(window.event); });
    }
}

function getDocumentOffset()
{
    var x = 0;
    var y = 0;
    if (document.attachEvent != null) { // Internet Explorer & Opera
        x = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
        y = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    } else if (!document.attachEvent && document.addEventListener) { // Gecko
        x = window.scrollX;
        y = window.scrollY;
    }
    return {x:x, y:y};
}

function getCursorPosition(event) {
    var x = 0;
    var y = 0;
    if (document.attachEvent != null) { // Internet Explorer & Opera
        x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
        y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    } else if (!document.attachEvent && document.addEventListener) { // Gecko
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
    }
    return {x:x, y:y};
}
///////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////
function classDrag(obj)
{
    this.obj = obj;

    this.handleEvent = function(event)
    {
        if (draged != null) {
            draged.obj.gui.dropMsg();
        }
        var coords = getCursorPosition(event);
        var doc = getDocumentOffset();
        draged = new dragetObject(coords.x - doc.x, coords.y - doc.y, this.obj);
    }
}

function dragetObject(x0, y0, obj)
{
    this.prevX = x0;
    this.prevY = y0;
    this._prevX = x0;
    this._prevY = y0;

    this.obj = obj;

    this.dX;
    this.dY;
    this.obj.gui.dragTimer = new GUITimer();

    this.obj.gui.speedX    = 0;
    this.obj.gui.speedY    = 0;
    this.obj.gui.speed     = null;
    this.obj.gui.beforeOffsetX = null;
    this.obj.gui.beforeOffsetY = null;

    this.obj.gui.dragMsg();

    this.setNewCoords = function(x, y)
    {
        var dTime = this.obj.gui.dragTimer.reset();
        var _dX = x - this._prevX;
        var _dY = y - this._prevY;
        if (dTime > 0) {
            this.obj.gui.speedX = _dX / dTime;
            this.obj.gui.speedY = _dY / dTime;
        } else {
            this.obj.gui.speedX = 0;
            this.obj.gui.speedY = 0;
        }
        this._prevX += _dX;
        this._prevY += _dY;

        this.dX = x - this.prevX;
        this.dY = y - this.prevY;
        if ((this.dX != 0) || (this.dY != 0)) {
            this.obj.gui.onOffset(this.dX, this.dY);
            this.prevX += this.dX;
            this.prevY += this.dY;
        }
    }
}

function classMove()
{
    this.handleEvent = function(event)
    {
        if (draged != null) {
            var coords = getCursorPosition(event);
            var doc = getDocumentOffset();
            draged.setNewCoords(coords.x - doc.x, coords.y - doc.y);
        }
    }
}

function classDrop()
{
    this.handleEvent = function(event)
    {
        if (draged != null) {
            if (draged.obj.gui.dragTimer.reset() > 0.001) {
                draged.obj.gui.speedY = draged.obj.gui.speedX = 0;
            }
            draged.obj.gui.dropMsg();
        }
        draged = null;
    }
}

var draged = null;

function round(value, precission)
{
    return parseInt(value.toFixed(precission || 0));
}

function GUITimer()
{
    this.getMicrotime = function()
    {
        var d = new Date();
        return ((d.getHours() * 3600) + (d.getMinutes() * 60) + d.getSeconds() + (d.getMilliseconds() / 1000));
    }

    this.startTime = this.getMicrotime();

    this.getTime = function()
    {
        return (this.getMicrotime() - this.startTime);
    }

    this.reset = function()
    {
        var res = this.getTime();
        this.startTime = this.getMicrotime();
        return res;
    }
}

var GUILimitedEventTimer_obj = null;
var GUILimitedEventTimer_F1 = null;
var GUILimitedEventTimer_F2 = null;

function GUILimitedEventTimer(callback, interval, limit)
{
    this.stoper = function()
    {
        //alert("asds");
        clearInterval(this.intervalID);
    }
    this.callback = callback;
    GUILimitedEventTimer_obj = this;
    GUILimitedEventTimer_F1 = function(){GUILimitedEventTimer_obj.callback();};
    GUILimitedEventTimer_F2 = function(){GUILimitedEventTimer_obj.stoper();};

    this.intervalID = setInterval('GUILimitedEventTimer_F1();', interval);
    this.timeoutID  = setTimeout('GUILimitedEventTimer_F2();', limit);

    this.stop = function()
    {
        clearTimeout(this.timeoutID);
        this.stoper();
    }
}

tableGUIClass = function(data)
{
    this.owner     = data.owner;
    this.overlay   = data.overlay;
    this.a         = data.a;

    this.speedX    = 0;
    this.speedY    = 0;
    this.speed     = null;
    this.dragTimer = null;
    this.beforeOffsetX = null;
    this.beforeOffsetY = null;

    this.inerTimer = null;

    this.dropMsg = function()
    {
        if ((this.a >= 0) || ((this.speedX == 0) && (this.speedY == 0))) {
            return;
        }
        this.speed = Math.sqrt((this.speedX * this.speedX) + (this.speedY * this.speedY));

        this.beforeOffsetX = null;
        this.beforeOffsetY = null;
        this.dragTimer = new GUITimer();

        this.overlay.innerHTML = '';//-1 * this.speed / this.a;

        this.inerTimer = new GUILimitedEventTimer(this.inert, 10, (-1 * this.speed / this.a) * 1000);
    }

    this.dragMsg = function()
    {
        if (this.inerTimer != null) {
            this.inerTimer.stop();
        }
    }

    this.inert = function()
    {
        //alert("a");
        var o = tableOverlay2.gui;
        var dt = o.dragTimer.getTime();
        var path = ((o.speed * dt) + ((o.a * dt * dt) / 2));
        //o.overlay.innerHTML += path.toFixed(2) + ' (' + dt.toFixed(2) + ')<br/>';
        //return;
        var dX = 0;
        var dY = 0;
        if (o.speedX == 0) {
            dY = (o.speedY < 0) ? -path : path;
        } else if (o.speedY == 0) {
            dX = (o.speedX < 0) ? -path : path;
        } else {
            if (Math.abs(o.speedX) > Math.abs(o.speedY)) {
                var k = Math.abs(o.speedY) / Math.abs(o.speedX);
                dX = path / Math.sqrt(1 + (k * k));
                dY = dX * k;
            } else {
                var k = Math.abs(o.speedX) / Math.abs(o.speedY);
                dY = path / Math.sqrt(1 + (k * k));
                dX = dY * k;
            }
            dX = (o.speedX < 0) ? -dX : dX;
            dY = (o.speedY < 0) ? -dY : dY;
        }
        if (o.beforeOffsetX != null) {
            dX -= o.beforeOffsetX;
            dY -= o.beforeOffsetY;
        }
        if ((dX != 0) || (dY != 0)) {
            o.onOffset(dX, dY);
            if (o.beforeOffsetX == null) {
                o.beforeOffsetX = 0;
                o.beforeOffsetY = 0;
            } else {
                o.beforeOffsetX += dX;
                o.beforeOffsetY += dY;
            }
        }
    }

    this.onOffset = function(dx, dy)
    {
        this.owner.style.left = (this.owner.offsetLeft + dx) + 'px';
        this.owner.style.top  = (this.owner.offsetTop + dy) + 'px';
        this.overlay.style.left = (this.overlay.offsetLeft + dx) + 'px';
        this.overlay.style.top  = (this.overlay.offsetTop + dy) + 'px';
    }
}
///////////////////////////////////////////////////////////////////////////////////////////////

/*
При перетаскивании не должно происходить выделения текста где либо.
Не должен менятся вид курсора.

Drag & Drop
Прикрепление обработчика события Drag на некоторый объект.
В общем случае это может быть любое событие. Просто мы должны вызвать у него (обработчика) метод onDrag(x, y)
и передать ему координаты старта. Тутже, если произошло его смещение вызвать метод onOffset(dx, dy), где
dx, dy это смещение относительно старта. После завершения перетаскивания мы должны сообщить ему onDrop().

*/

var container = document.getElementById('container');
var table2 = document.getElementById('table2');
var tableOverlay2 = document.getElementById('table-overlay2');
var body = document.getElementsByTagName('html')[0];

tableOverlay2.gui = new tableGUIClass({
    owner: table2,
    overlay: tableOverlay2,
    a: -500
})

addHandler(body, 'mouseup', new classDrop(), false);
addHandler(body, 'mousemove', new classMove(), false);
addHandler(tableOverlay2, 'mousedown', new classDrag(tableOverlay2), false);

</script>
</body>
</html>
